<div id="sidebar" class="sidebar">
  <div class="sidebar-header">
    <img src="/logo.svg" width="48px" alt="" />
    <div class="sidebar-user">
      <h1>WinScript</h1>
      <a href="https://github.com/flick9000">github.com/flick9000</a>
    </div>
  </div>
  <button id="uncheckAll">Uncheck All</button>
  <div class="sidebar-buttons">
    <button id="importBtn">Import</button>
    <button id="exportBtn">Export</button>
  </div>
  <div class="sidebar-content">
    <div data-tab="tools-tab" class="sidebar-entry">
      <img src="icons/sidebar/tools.png" alt="" />
      <h1>Tools</h1>
    </div>
    <div data-tab="debloat-tab" class="sidebar-entry">
      <img src="icons/sidebar/debloat.ico" alt="" />
      <h1>Debloat</h1>
    </div>
    <div data-tab="privacy-tab" class="sidebar-entry">
      <img src="icons/sidebar/privacy.png" alt="" />
      <h1>Privacy</h1>
    </div>
    <div data-tab="telemetry-tab" class="sidebar-entry">
      <img src="icons/sidebar/telemetry.ico" alt="" />
      <h1>Telemetry</h1>
    </div>
    <div data-tab="gaming-tab" class="sidebar-entry">
      <img src="icons/sidebar/Gaming.png" alt="" />
      <h1>Gaming</h1>
    </div>
    <div data-tab="performance-tab" class="sidebar-entry">
      <img src="icons/sidebar/todo.png" alt="" />
      <h1>Performance</h1>
    </div>
    <div data-tab="miscellanous-tab" class="sidebar-entry">
      <img src="icons/sidebar/miscellanous.png" alt="" />
      <h1>Miscellanous</h1>
    </div>
    <div data-tab="install-tab" class="sidebar-entry">
      <img src="icons/sidebar/app.png" alt="" />
      <h1>Browse Apps</h1>
    </div>
    <hr />
    <div data-tab="script-tab" class="sidebar-entry">
      <img src="icons/sidebar/code.png" alt="" />
      <h1>Download Script</h1>
    </div>
  </div>
</div>

<style>
  @keyframes slide-in {
    from {
      transform: translateX(-150%);
    }
    to {
      transform: translateX(0);
    }
  }
  @keyframes sidebar-border-fade {
    from {
      border-color: transparent;
    }
    to {
      border-color: var(--primary);
    }
  }
  .sidebar {
    display: flex;
    position: fixed;
    flex-direction: column;
    height: 95%;
    gap: 16px;
    min-width: 300px;
    margin-left: 1rem;
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .sidebar-user {
    display: flex;
    flex-direction: column;
  }

  .sidebar-user h1 {
    font-weight: 500;
  }

  .sidebar-buttons {
    display: flex;
    gap: 8px;
  }

  .sidebar-buttons button {
    width: 100%;
  }

  .sidebar-user > a {
    font-size: 12px;
    color: var(--muted);
    font-weight: 400;
  }

  .sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .sidebar-entry {
    width: 100%;
    padding-inline: 8px;
    border-radius: 5px;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-left: 4px solid transparent;
  }

  .sidebar-entry:hover {
    background-color: hsl(from var(--text) h s l / 0.08);
  }

  .sidebar-entry.active {
    background-color: hsl(from var(--text) h s l / 0.08);
    animation: sidebar-border-fade 0.3s ease forwards;
  }

  .sidebar-entry > img {
    max-width: 24px;
  }

  @media screen and (max-width: 800px) {
    .sidebar {
      display: none;
    }

    .sidebar.responsive {
      position: fixed;
      display: flex;
      background-color: hsla(253, 50%, 7%, 0.4);
      backdrop-filter: blur(75px);
      -webkit-backdrop-filter: blur(75px);
      width: 100%;
      height: 100%;
      top: 0;
      margin: 0;
      padding-top: 3rem;
      padding-inline: 1.5rem;
      z-index: 2;
    }
  }

  @media (min-width: 800px) {
    .sidebar {
      animation: slide-in 0.3s ease forwards;
    }
  }
</style>
